<template>
  <el-dialog
    title="菜单引导"
    :visible.sync="visible"
    width="300px"
    top="25%"
    center
    custom-class="menu-guide-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="reset"
  >
    <span>欢迎使用售后宝，本次迭代我们将菜单进行整合</span>
    <div slot="footer">
      <el-button type="primary" @click="initGuide">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUserGuideStorageFor, setUserGuideStorage } from '@src/api/GuideApi';
const MENU_BAR_GUIDE = 'menu-bar-guide';
export default {
  name: 'menu-bar-guide',
  inject: ['initData'],
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    isShowTodayCalendar() {
      return this.initData?.calendar
    },
    isShowNotice() {
      return this.initData?.notice
    },
  },
  mounted () {
    this.$nextTick(()=>{
      this.queryUserGuide(MENU_BAR_GUIDE)
    })
  },
  methods: {
    reset(){
      this.$emit('handleCloseMenuBarGuide');
      this.completeUserGuide(MENU_BAR_GUIDE)
    },
    initGuide(){
      this.visible = false
      let id = 'menu-bar-guide'
      let lastFinish = 1
      let arr = [{
        content: '本次通过三级菜单的形式并以业务视角进行了菜单划分，业务功能更清晰',
        haveStep: true,
        direction: 'row',
        nowStep: 1,
        id,
        domObj:()=>{
          return document.querySelector('.frame-menu')
        },
        needCover: true,
        lastFinish,
        show: true,
        stepTotalSetting: {
          leftBtn: this.$t('common.base.skip'),
        }
      }, 
      {
        content: '新增快捷新建入口',
        haveStep: true,
        nowStep: 2,
        id,
        domObj:()=>{
          return document.querySelector('.express-entrance__button')
        },
        needCover: true,
        lastFinish,
        show: true, // 本来快捷入口是需要判断工作台灰度的，但等这次上线的时候灰度会放开
      }, 
      {
        content: '日程管理入口移动到顶部，可快捷查看当日日程，点击进入详情',
        haveStep: true,
        nowStep: 3,
        id,
        domObj:()=>{
          return document.querySelector('.today-calendar-button')
        },
        needCover: true,
        lastFinish,
        show: this.isShowTodayCalendar,
      }, 
      {
        content: '消息入口规整，信息公告设置通过此处进入',
        haveStep: true,
        nowStep: this.isShowNotice ? 3 : 2,
        id,
        domObj:()=>{
          return document.querySelector('.notice-info-manager')
        },
        needCover: true,
        finishBtn: '完成',
        show: this.isShowNotice,
      }].filter(item=>item.show)
      this.$Guide(arr, 0, '', (e) => {
        // console.log('e', e);
        const { type, nowStep } = e; 
        
        if (type === 'left') {
          this.$emit('MenuBarGuideLeftClick');
          return
        }
        
        if(type === 'stop' || type === 'finish') {
          // this.completeUserGuide(MENU_BAR_GUIDE)
          this.$emit('handleCloseMenuBarGuide');
        } else if(type === 'next') {
          if(this.isShowTodayCalendar) {
            if(nowStep == 2) {
              // 打开消息
              this.$emit('openNotificationCenter')
            }
          } else {
            if(nowStep == 1) {
              // 打开消息
              this.$emit('openNotificationCenter')
            }
          }
        }
        return new Promise((resolve, reject) => {
          resolve()
        })
      }).create().then(()=>{
        this.completeUserGuide(MENU_BAR_GUIDE)
      })
    },
    completeUserGuide(type){
      const params = {}
      params.type = type
      params.step = 1
      params.isComplete = 1
      params.desc = ''
      setUserGuideStorage(params)
    },
    async queryUserGuide(type) {
      try {
        const { status, data } = await getUserGuideStorageFor({ type })
        // if( status != 0 || !data) return;
        // if(status == 0 && data && !data.isComplete) {
        //   // this.visible = true;
        //   this.initGuide();
        // }

        if(status == 0 && data && !data.isComplete) return this.initGuide();

        this.$emit('handleCloseMenuBarGuide');
      } catch (error) {
        this.$emit('handleCloseMenuBarGuide');
        console.log(error);
      }
    },
  },
}
</script>

<style lang="scss">
.menu-guide-dialog {
  .el-dialog__headerbtn {
    top: 0!important;
  }
}
</style>
